<template>
  <div>
    <div class="item">
      <n-radio-group v-model:value="state.option" @update:value="onChange">
        <div class="radio"><n-radio value="myDept">申请人部门内人员</n-radio></div>
        <div class="radio"><n-radio value="myDeptPosition">申请人部门内某岗位的人员</n-radio></div>
      </n-radio-group>
      <Position
        v-show="state.option == 'myDeptPosition'"
        :height="props.height"
        :multiple="false"
        @select-single="onSelectPosition"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
  import { NGi, NGrid, NRadioGroup, NRadio } from 'naive-ui'
  import Position from './Position.vue'

  const props = defineProps<{ height: number }>()
  const emits = defineEmits(['select'])

  const state = reactive({ position: {} as any, option: '' })

  const onChange = (val: any) => {
    console.log(val)
    if (val == 'myDept') {
      emits('select', [{ id: '${flowCandidateUsers.getByMyDept(applyUserId)}' }])
    } else {
      emits('select', [{ id: getPositionExp() }])
    }
  }

  const onSelectPosition = (data: any) => {
    if (state.option == 'myDeptPosition') {
      state.position = data
      emits('select', [{ id: getPositionExp() }])
    }
  }
  const getPositionExp = () => {
    const exp =
      "${flowCandidateUsers.getByMyDeptPosition(applyUserId,'" + state.position.positionId + "')}"
    return exp
  }
</script>

<style lang="scss" scoped>
  .item {
    display: flex;
    gap: 15px;
  }
  .radio {
    display: block;
    padding: 5px 0;
    width: 200px;
  }
</style>
